<template>
    <div class="package-container">
        <div class="banner">
            <div class="banner-bg">
                <img class="big-start" src="../../assets/img/big-start.png">
                <img class="big-eddy" src="../../assets/img/big-eddy.png">
                <img class="little-start" src="../../assets/img/little-start.png">
                <img class="little-eddy" src="../../assets/img/little-eddy.png">
                <img class="lots-start" src="../../assets/img/lots-little-start.png">
            </div>
            <div class="banner-content">
                <p class="banner-title">价值够大，价格够低</p>
                <p class="banner-desc">每月一杯咖啡的投入，换来成倍改善的沟通效率。</p>
            </div>
        </div>
        <div class="package-content">
            <div class="wrapper">
                <div class="package-item free-item">
                    <div class="item-title">免费版</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">0</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>100M 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>其他所有功能</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">个人套餐</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">15</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>3G 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>更好的技术支持服务</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">基础套餐</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">20</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>5G 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>更好的技术支持服务</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">标准套餐</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">25</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>10G 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>更好的技术支持服务</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">企业基础套餐</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">40</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>20G 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>更好的技术支持服务</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">企业标准套餐</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">80</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>50G 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>更好的技术支持服务</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">企业高级套餐</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">100</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>100G 仓库空间</li>
                            <li>不限私有项目数量</li>
                            <li>不限项目成员数量</li>
                            <li>更好的技术支持服务</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item">
                    <div class="item-title">独立部署</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">150</p>
                        <p class="price-unit">/月</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li>100G 仓库空间</li>
                            <li>不限私有，不限成员</li>
                            <li>专享服务器，专享带宽</li>
                            <li>200M超大带宽（按流量计费）</li>
                        </ul>
                    </div>
                </div>
                <div class="package-item private-deployment">
                    <div class="item-title">私有部署</div>
                    <div class="item-price">
                        <p class="price-icon">￥</p>
                        <p class="price-num">6K</p>
                        <p class="price-unit">/永久</p>
                    </div>
                    <div class="item-desc">
                        <ul>
                            <li><p>完全掌控代码、数据</p></li>
                            <li><p>自己服务器，0顾虑</p></li>
                            <li><p>提供专人部署和维护服务</p></li>
                            <li><p>一次性买断，永久使用权</p></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Vip"
    }
</script>

<style scoped>
    .package-container {
        min-width: 1200px;
    }
    .banner {
        overflow: hidden;
        position: relative;
        height: 350px;
        background-image: radial-gradient(51% 90%, #3F7EB4 12%, #202545 91%);
    }
    .banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    .banner-bg img {
        position: absolute;
    }
    .big-start {
        width: 340px;
        top: 161px;
        left: 0;
    }
    .big-eddy {
        width: 90px;
        top: 115px;
        left: 195px;
    }
    .little-start {
        top: 145px;
        right: 85px;
        width: 75px;
    }
    .little-eddy {
        top: 267px;
        right: 270px;
        width: 50px;
    }
    .banner-content {
        margin-top: 149px;
        position: relative;
        z-index: 2;
        text-align: center;
    }
    .banner-title {
        margin-bottom: 23px;
        font-size: 44px;
        line-height: 62px;
        color: #fff;
    }
    .banner-desc {
        font-size: 24px;
        font-weight: 100;
        line-height: 39px;
        color: rgba(225, 225, 225, .6);
    }

    .package-content {
        margin: 30px auto 0;
        width: 1200px;
    }
    .package-content .wrapper {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 1040px;
    }
    .package-item {
        overflow: hidden;
        margin-bottom: 30px;
        width: 304px;
        border-radius: 4px;
        border: 1px solid #e8e8e8;
        box-shadow: 0 12px 17px 0 rgba(0,0,0,.1);
    }
    .item-title {
        position: relative;
        box-sizing: border-box;
        padding: 32px 0 ;
        height: 80px;
        border-bottom: 1px solid #e8e8e8;
        font-size: 28px;
        font-weight: 100;
        text-align: center;
        color: #fff;
        background: #1891f0;
    }
    .free-item .item-title {
        color: #585858;
        background: #f8f8f8;
    }
    .item-price {
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        padding-top: 35px;
        height: 130px;
        border-bottom: 1px solid #e8e8e8;
        font-size: 60px;
        color: #474747;
        text-align: center;
    }
    .price-icon {
        position: absolute;
        top: 30px;
        left: 80px;
        font-size: 30px;
        color: #686868;
    }
    .price-unit {
        position: absolute;
        right: 75px;
        bottom: 35px;
        color: #808080;
        font-size: 16px;
        font-weight: 100;
    }
    .item-desc {
        padding: 10px 20px 20px 90px;
        color: #474747;
        font-size: 13px;
        line-height: 18px;
    }
    .item-desc ul {

    }
    .item-desc li {
        margin-top: 10px;
        list-style: disc;
    }

    .private-deployment .price-num,
    .private-deployment li p {
        color: rgb(245, 108, 108);
    }
</style>